<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        .top{
            width: 100%;
            height: 50px;
            background-color: #0099CC;
            display: flex;
            justify-content: space-between;
        }

        .top .box{
            width: 200px;
            height: 50px;
            background-color: #0099CC;
            display: flex;
            justify-content: space-around;
            line-height: 50px;
            color: #E9F5F9;
        }

        .top .box2{
            width: 300px;
            height: 50px;
            background-color:#0099CC;
            display: flex;
            justify-content: space-around;
            line-height: 50px;
            color: #E9F5F9;
        }

        .top .box2 p{
          font-size: 16px; 
          margin-top: -2px; 
        }

        .bottom{
            width: 100%;
            height: 1000px;
            display: flex;
            
         }
         .bottom .left{
            width: 200px;
            overflow: hidden;
            background-color: #2C3E50;
         }
         .bottom .left ul {
            height: 500px;
        }

        .bottom .left ul li {
            display: flex;
            /* background-color: yellow; */
            color: white;
            font-size: 20px;
            width: 300px;
            height: 55px;
            /* padding-left: 2px; */
            /* line-height: 50px; */
        }

        .bottom .right{
            flex: 1;
            height: 100%;
            /* background-color: yellow; */
        }

        .bottom .right .big{
            width: 100%;
            height: 100px;
            /* background-color: blue; */
            display: flex;
            justify-content: space-between;
        }

        .bottom .right .box1{
            width: 23%;
            height: 80px;
            background-color: #0096C0;
            padding: 10px;
            color: #D2E3D8;
        }

        .bottom .right .box1:nth-child(2){
            background-color: #0096C0;
            color: #D2E3D8;

        }

        .bottom .right .box1:nth-child(3){
            background-color: #15C377;
            color: #D2E3D8;
        }

        .bottom .right .box1:nth-child(4){
            background-color: #909080;
            color: #D2E3D8;
        } 

        .bottom .right .data {
            display: flex;
            justify-content: space-between;
        }

        .bottom .right  .data .line {
            margin-top: 40px;
            width: 700px;
            height: 400px;
            /* border: 1px solid black; */
        }

        .bottom .right .data .baner {
            width: 700px;
            height: 400px;
            margin-top: 40px;
            /* border: 1px solid black; */
        }

        .bottom table{
            margin: 20px 0;
            width: 100%;
            line-height: 40px;
            text-align: center;
        }

        .bottom table tr th{
            max-width: 200px;
        }

        .bottom table tr th:first-child, .bottom table tr td:first-child{
            text-align: left;
        }

    </style>
</head>
<body>
    <div class="top">
       <div class="box">
        <div class="logo">后台管理系统</div>
        <span class="iconfont icon-liebiao"></span>
       </div>
       <div class="box2">
            <p>当前用户：bootstrap中文  角色：管理员 </p>
       </div>
    </div>
    <div class="bottom">

          <div class="left">
            <ul>
                <li class="iconfont icon-huaban ">后台页面</li>
                <li class="iconfont icon-yuanquan ">设计元素</li>
                <li class="iconfont icon-yuanquan">表单元素</li>
                <li class="iconfont icon-yuanquan ">示例页面</li>
                <li class="iconfont icon-liwuhe ">常用列表</li>
                <li class="iconfont icon-xinfeng ">脚本插件</li>
                <li class="iconfont icon-pages ">统计图表</li>
              </ul>
    </div> 


          <div class="right">
            
            <div class="big">
                <div class="box1">
                    <p>今日收入</p>
                    <h4>100,000.00</h4>
                </div> 
                <div class="box1">
                    <p>昨日收入</p>
                    <h4>400,000.00</h4>
                </div> 
            
            
                <div class="box1">
                    <p>月度累计收入</p>
                    <h4>100,000.00</h4>
                </div> 
            
           
                <div class="box1">
                    <p>年度累计收入</p>
                    <h4>500,000.00</h4>
               </div>
           
              </div>

            
            <div class="data">
                <div class="line"></div>
                <div class="baner"></div>
            </div>
           <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>订单号</th>
                        <th>商品名称</th>
                        <th>下单日期</th>
                         <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>23534536</td>
                        <td>黑色休闲裤</td>
                       <td> <span class="statusok">完成</span> </td>
                        <td> <span>编辑</span> <span>删除</span> </td>
                    </tr>
                   
                </tbody>
            </table>
                
        </div>
        
    </div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="./mock.js"></script>
<script src="./promise-ajax.js"></script>

<script>
    function render(arr){
        document.querySelector('tbody').innerHTML=arr.map((item)=>{
            return`
            <tr>
                <td>${item.id}</td>
                <td>${item.count}</td>
                <td>${item.class}</td>
                <td>${item.date}</td>
                <td>${item.good}</td>
                <td>${item.sta}</td>
             </tr>
            `
        }).join('')
    }
    ajax('get','./data.json',{}).then((arr)=>{
        render(arr)
    })

    var obj = Mock.mock({
        'list1|12': [
            ' @natural(10, 100)'
        ],
        'list2|12': [
            ' @integer(10, 100)'
        ],
    })

    var con = document.querySelector('.right>.data>.baner');
    var e = echarts.init(con);
    //2.绘制图表
    e.setOption({
        title: { //图表的标题
            text: 'visitors Over Time'
        },
        legend: { //图例
            bottom: 20,
            right: 10,
        },
        xAxis: { //x轴设置
            data: ['18th', '20th', '22th', '24th', '26th', '28th', '30th']
        },
        yAxis: { //y轴设置

        },
        series: [ //数据系列
            {
                name: 'This year',
                type: 'line',
                data: obj.list1,
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'dodgerblue', //折线颜色
                        lineStyle: { width: 7 }, //折现的宽度
                    }
                }
            },
            {
                name: 'Last year',
                type: 'line',
                data: obj.list2,
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'gray', //折线颜色
                        lineStyle: { width: 5 }, //折现的宽度
                    }
                }
            }
        ]
    });
    var con = document.querySelector('.right>.data>.line');
    var e2 = echarts.init(con);
    //2.绘制图表
    e2.setOption({
        title: { //图表的标题
            text: 'Sales'
        },
        legend: { //图例
            bottom: 20,
            right: 10,
        },
        xAxis: { //x轴设置
            data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
        },
        yAxis: { //y轴设置
        },
        series: [ //数据系列
            {
                name: 'This year',
                type: 'bar',
                data: obj.list1,
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'dodgerblue', //折线颜色
                        lineStyle: { width: 3 }, //折现的宽度
                    }
                }
            },
            {
                name: 'Last year',
                type: 'bar',
                data: obj.list2,
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'gray', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }
            }
        ]
    });
</script>
  
